<html>
    <head>
        <title>边框</title>
    </head>
    <body>
        <fieldset>
            <legend>01.边框的写法</legend>
            <style>
                #id{
                    width: 100px;
                    height: 100px;
                    border: dotted;/**边框就是个线，线必须先指定是什么样，是实线还是虚线还是点线，然后才能指定颜色，粗细[如果先指定颜色和粗细则不生效]**/
                    /* 
                    复合属性展开写,类似于这种(未完全展开)
                    border-top-**
                    border-right-**
                    border-bottom-**
                    border-left-** 
    
                    top展开写
                    border-top-color: ;颜色
                    border-top-style: ;样式
                    border-top-width: ;宽度
    
                    right展开写
                    border-right-color: ;颜色
                    border-right-style: ;样式
                    border-right-width: ;宽度
    
                    顺序：上->右->下->左
                    总结：边框会改变盒子的厚度
                    */
                }
            </style>
            <div id="id"></div>
        </fieldset>
        
        <fieldset>
            <legend>02.盒子宽高为0/边框会改变盒子的厚度</legend>
            <style>
                #id2{
                    width: 10px;
                    height: 10px;
                    border-top:solid red 100px;
                    border-right:solid green 100px;
                    border-bottom:solid blue 100px;
                    border-left:solid yellow 100px;
                }
            </style>
            <div id="id2"></div>
        </fieldset>

        <fieldset>
                <legend>03.盒子宽高为0/边框会改变盒子的厚度</legend>
                <style>
                    #id3{
                        width: 10px;
                        height: 10px;
                        border-top:solid red 150px;
                        border-right:solid green 150px;
                        border-bottom:solid blue 150px;
                        border-left:solid yellow 150px;
                    }
                </style>
                <div id="id3">
                    边框会改变盒子的厚度，如果不想大小发生改变,需要：宽减去边框 高减去内边框
                </div>
            </fieldset>
    </body>
</html>